<template>
  <div class="layout-wrapper">
    <div class="top">
      <div class="tabs" v-if="tabs">
        <slot name="tabs">
          <el-tabs v-model="active" @tab-click="$emit('tab', $event.name)">
            <el-tab-pane
              v-for="(title, key) in tabs"
              :key="key"
              :label="title"
              :name="key"
            ></el-tab-pane>
          </el-tabs>
        </slot>
      </div>
      <!-- 按钮 -->
      <div class="buttons" v-if="$slots.buttons">
        <slot name="buttons"></slot>
      </div>
      <!-- 列表 -->
      <div class="list">
        <slot></slot>
      </div>
    </div>

    <!-- 分页 -->
    <div class="page" v-if="value">
      <el-pagination
        @size-change="(size) => change('limit', size)"
        @current-change="(num) => change('num', num)"
        :current-page="value.num"
        :page-size="value.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Layout",
  data() {
    return {
      /***
       * 激活名称
       */
      active: "",
    };
  },
  watch: {
    tabs: {
      immediate: true,
      handler(value) {
        if (!value) return;
        this.active = this.defaultActive || Object.keys(value)[0];
      },
    },
  },
  methods: {
    change(type, value) {
      const page = { ...this.value, [type]: value };
      this.$emit("input", page);
      this.$emit("change", page);
    },
  },
  props: {
    /**
     * 激活的 name
     */
    defaultActive: String,
    /**
     * 要渲染的标签
     */
    tabs: Object,
    /**
     * 分页数据
     */
    value: Object,
    /**
     * 总条数
     */
    total: Number,
  },
};
</script>

<style lang="scss" scoped>
.layout-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .top {
    flex: 1;
    max-height: 100%;
    overflow: auto;

    .tabs {
      padding: 0 15px;
    }
    .list {
      background: white;
    }
    .buttons {
      padding: 16px 10px;
    }
  }

  .page {
    height: 60px;
    display: flex;
    align-items: center;
    border-top: 1px solid rgb(222, 226, 230);
    margin-bottom: 100px;
  }
}
</style>